import { Card ,Form,Input,Button,Select,Table,message,Popconfirm} from "antd"
import {useState,useEffect,useMemo,If} from "react"
import { queryPerform,updatePerform,removePerform } from "../../../../utils/request/api"
// import {Card} from "antd"
export default ()=>{
    useEffect(()=>{

    },[])
    const [form]=Form.useForm()// 全局表单
    let [perList,setPerList]=useState([])//奖惩列表
    let [total,setTotal]=useState(0)// 总数
    let [cutId,setCutId]=useState(-1)// 当前id
    const getPerform=(pageNum,pageSize,params={})=>{// 获取奖惩信息
        queryPerform({...params,pageNum,pageSize})
        .then(res=>{
            console.log(res);
            if(res.meta.code==200){
                if(res.data.length==0){
                    console.log(6666666);
                   message.info("没有数据")
                }
                setPerList(res.data)
                setTotal(res.pages.total)
            }
        })
    }
    const onQuery=(val)=>{// 查询奖惩信息
        // console.log(form);
        let params=form.getFieldsValue()
        console.log(params);
        // console.log(val);
        !params.status&&(params.status="1")
         getPerform(1,2,params)
       
    }

    const savePer=item=>{// 修改按钮
        console.log(item);
        setCutId(item.id)
    }
    const cancelSave=()=>{// 取消修改
        setCutId(-1)
    }
    const sureSave=item=>{// 确认修改
        console.log(item);
        let {reason,id}=item
        let params={reason,id}
        updatePerform(params)
        .then(res=>{
            console.log(res);
            if(res.meta.code==200){
                onQuery()
                setCutId(-1)
                message.success(res.meta.msg)
            }
        })
    }
    const changeReason=(item,e)=>{// 修改input
        // console.log(e);
       item.reason=e.target.value
       setPerList([...perList])

    }

    const sureDel=id=>{// 删除
        removePerform({id})
        .then(res=>{
            if(res.meta.code==200){
                onQuery()
                message.success(res.meta.msg)
            }
        })
    }
     const renderPer=useMemo(()=>{
        const props={
            columns:[
               {
                title:"姓名",
                dataIndex:"name",
                key:"name"
               },
               {
                title:"理由",
                // dataIndex:"reason",
                key:"reason",
                render:item=><>
                  <If isShow={item.id!=cutId}>
                    {item.reason}
                  </If>
                  <If isShow={item.id==cutId}>
                     <Input width={{maxWidth:'80px'}} onChange={changeReason.bind(null,item)} value={item.reason} />
                  </If>
                </>
               },
               {
                title:"奖惩金额",
                dataIndex:"money",
                key:"money"
               },
               {
                title:"状态",
                // dataIndex:"name",
                key:"status",
                render:(item)=><>
                 {item.status=="1"?"惩罚":"奖赏"}
                </>
               },
               {
                title:"操作",
                render:item=><>
                   <If isShow={item.id!=cutId}>
                    <Button type="primary" onClick={savePer.bind(null,item)}>修改</Button>
                    &nbsp;
                    &nbsp;
                    <Popconfirm
                       title="确认删除此条内容吗"
                       okText="确认"
                       cancelText="取消"
                       onConfirm={sureDel.bind(null,item.id)}
                    >
                       <Button type="danger">删除</Button>
                    </Popconfirm>
                   </If>
                   <If isShow={item.id==cutId}>
                    <Button type="primary" onClick={sureSave.bind(null,item)}>确认</Button>
                    &nbsp;
                    &nbsp;
                    <Button type="" onClick={cancelSave}>取消</Button>
                   </If>

                </>
               }
            ],
            dataSource:perList,
            pagination:{
                total,
                pageSize:1,
                onChange:(page)=>{
                    // console.log(page);
                    let params=form.getFieldsValue()
        // console.log(params);
        // console.log(val);
                    !params.status&&(params.status="1")
                    getPerform(page,2,params)
                }
            }
        }
        return <Table {...props} />
     },[perList,cutId])
    return <div>
        <Card title="查询">
        <Form
            
            layout={"inline"}
            form={form}
            onFinish={onQuery}
            // defaultActiveFirstOption
            // initialValues={{
            //     layout: formLayout,
            // }}
            // onValuesChange={onFormLayoutChange}
            >
            <Form.Item label="姓名" name="name">
              <Input placeholder="姓名" />
            </Form.Item>
            <Form.Item label="状态" name="status">
                {/* <Input placeholder="input placeholder" /> */}
                <Select
                defaultValue={'1'}
                style={{
                    width: 120,
                }}
                placeholder="请选择奖惩"
                // onChange={handleChange}
                options={[
                    {
                    value: '2',
                    label: '奖赏',
                    },
                    {
                    value: '1',
                    label: '惩罚',
                    },
                   
                ]}
                />
            </Form.Item>
            
            <Form.Item >
                <Button type="primary" htmlType="submit">查询</Button>
            </Form.Item>
            </Form>
        </Card>
        {perList.length?renderPer:''}

    </div>
}